<template>
    <div v-if="systemComponent">
        <PageTitle>
            <h1><router-link :to="{ name: 'Assets' }">Assets</router-link> <i class="material-icons">chevron_right</i> <router-link :to="{ name: 'Asset', params: { id: systemComponent.asset.id } }">{{systemComponent.asset.name}}</router-link> <i class="material-icons">chevron_right</i> <router-link :to="{ name: 'Asset', params: { id: systemComponent.asset.id } }">{{systemComponent.system.name}}</router-link> <i class="material-icons">chevron_right</i> {{ systemComponent.name }}</h1>
        </PageTitle>

        <Expandable name="Work Requests">
            <WorkRequests :work-requests="systemComponent.work_requests"></WorkRequests>
        </Expandable>
    </div>
</template>
<script>
    import axios from 'axios'
    import dateFormat from 'dateformat'
    import Discussions from './Discussions.vue'
    import Documents from './Documents.vue'
    import Expandable from './Expandable.vue'
    import Gallery from './Gallery.vue'
    import PageTitle from './PageTitle.vue'
    import Panel from './Panel.vue'
    import WorkRequests from './WorkRequests.vue'

    export default {

        components: {
            Discussions,
            Documents,
            Expandable,
            Gallery,
            PageTitle,
            Panel,
            WorkRequests
        },

        data() {
            return {
                systemComponent: null
            }
        },

        mounted: function() {

        },

        methods: {
            fetchData: function() {
                var self = this;

                axios.get(process.env.API_ROOT + '/components/' + this.$route.params.id, {
                })
                    .then(function(response) {
                        self.systemComponent = response.data;
                    });
            },
        },

        created() {
            this.fetchData()
        },

        watch: {
            '$route': 'fetchData'
        }

    }
</script>